<template>
    <Form :ref="formName" :model="formData" :rules="dynamicData.formDataRules" :label-width="labelWidth" :label-position="labelPosition">
        <Row :gutter="24" type="flex" justify="end">
            <Col v-bind="grid" v-for="(item, index) in copyFormData.slice(0, 3)" :key="index">
                <component :itemData="item.data" v-bind:is="item.fileName" @handleChangeFormData="handleChangeFormData"></component>
            </Col>
            <!-- 超过三条需要折叠 start -->
            <template v-if="collapse">
                <Col v-bind="grid" v-for="(item, index) in copyFormData.slice(3)" :key="index">
                    <component :itemData="item.data" v-bind:is="item.fileName" @handleChangeFormData="handleChangeFormData"></component>
                </Col>
            </template>
            <!-- 超过三条需要折叠 end -->
            <Col v-bind="grid" class="ivu-text-right">
                <qw-submit-button :formName="formName" :isCollapse="collapse" @handleSubmit="handleSubmit" @handleReset="handleReset" @collapseChange="collapseChange"></qw-submit-button>
            </Col>
        </Row>
    </Form>
</template>
<script>
    import util from '@/libs/util';
    import forms from '@/mixins/dynamicform'; // 混入通用代码
    import { dynamicData } from './dynamicConfig'; // 组件配置文件
    import qwSubmitButton from '@/components/common/formItem/qwSubmitButton'; // 表单操作组件

    export default {
        mixins: [forms],
        components: {
            ...util.Pub.dynamicComps(dynamicData.formData),
            qwSubmitButton
        },
        data () {
            return {
                dynamicData: dynamicData // 配置的数据
            }
        }
    }
</script>
